@use '@angular/material' as mat;

@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');


@import "node_modules/@angular/material/theming";
@include mat-core();

$theming-material-components-primary: mat-palette($mat-teal);
$theming-material-components-accent: mat-palette($mat-orange, A200, A100, A400);
$theming-material-components-warn: mat-palette($mat-red);
$theming-material-components-typography: mat.define-typography-config($font-family: 'Open Sans');

$theme1: mat-dark-theme(
  (
   color: (
    primary: mat-palette($mat-teal),
    accent: mat-palette($mat-orange, A200, A100, A400),
    warn: mat-palette($mat-red),
  ),
   typography: $theming-material-components-typography,
   density: 0,
  )
);

$theme2: mat-dark-theme(
  (
   color: (
    primary: mat-palette($mat-light-blue),
    accent: mat-palette($mat-orange, A200, A100, A400),
    warn: mat-palette($mat-red),
  ),
   typography: $theming-material-components-typography,
   density: 0,
  )
);

$theme3: mat-dark-theme(
  (
   color: (
    primary: mat-palette($mat-light-green),
    accent: mat-palette($mat-orange, A200, A100, A400),
    warn: mat-palette($mat-red),
  ),
   typography: $theming-material-components-typography,
   density: 0,
  )
);

@include mat.all-component-themes($theme1);

.theme-1 {
  // use default
}

.theme-2 {
  @include mat.all-component-colors($theme2);
}

.theme-3 {
  @include mat.all-component-colors($theme3);
}
